<script>
  import { flip } from "svelte/animate"
  import { crossfade, scale } from "svelte/transition"

  export let color = "pink"

  const [send, receive] = crossfade({ fallback: scale })

  let boingers = [
    { val: 1, boinged: true },
    { val: 2, boinged: true },
    { val: 3, boinged: false },
    { val: 4, boinged: true },
    { val: 5, boinged: false },
  ]

  function toggleBoing(id) {
    const index = boingers.findIndex((v) => v.val === id)
    boingers[index].boinged = !boingers[index].boinged
  }
</script>

<div class="t">
  <div class="boingers">
    {#each boingers.filter((v) => !v.boinged) as { val } (val)}
      <div
        animate:flip
        in:receive={{ key: val }}
        out:send={{ key: val }}
        style="background:{color};"
        on:click={() => toggleBoing(val)}
      >
        {val}
      </div>
    {/each}
  </div>

  <div class="boingers">
    {#each boingers.filter((v) => v.boinged) as { val } (val)}
      <div
        animate:flip
        in:receive={{ key: val }}
        out:send={{ key: val }}
        style="background:{color};"
        on:click={() => toggleBoing(val)}
      >
        {val}
      </div>
    {/each}
  </div>
</div>

<style>
  .t {
    width: 300px;
    height: 200px;
    display: flex;
    justify-content: space-between;
  }

  .boingers {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

  .boingers div {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eee;
    font-weight: bold;
    border-radius: 2px;
    cursor: pointer;
  }
</style>
